<template>
  <div class="test">
    <page-header></page-header>

    <div class="page-body">
      <div class="page-body1">
        <page-side></page-side>
      </div>

      <div class="page-body2">
        <!-- swipe效果 -->
        <div class="swipe">
          <el-carousel :interval="6000" type="card" height="300px" >
            <el-carousel-item v-for="(item,index) in imglist" :key="index">
              <img class="top-img" :src="item.imgurl" alt>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 商品卡片 -->
        <div class="shopcard">
          <div class="shopcard_ch1">
            <div class="shopcard_ch1_ch1" v-for="(item,index) in shopListData" :key="index">
              <div v-for="item in imgList2" :key="item.id"><img class="shopcard_img" :src="item.imgurl" @click="goToDetail(item.id)"></div>
              <div class="shopcard_content">
                <div class="shopcard_price">￥{{item.price}}</div>
                <div class="shopcard_count">点击数:{{item.clicks}}</div>
                <div class="shopcard_title">{{item.tltle}}</div>
              </div>
              <div class="shopcard_content">
                <div class="shopcard_address">{{item.title}}</div>
                <div class="shopcard_status">{{item.status===1 ?'已认证':'未认证'}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页功能 -->
        <div class="paging_page">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            ></el-pagination>
          </div>
        </div>

        <page-footer></page-footer>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/pages/pageheader'
import PageSide from '@/components/pages/PageSide'
import PageContent from '@/components/pages/PageContent'
import PageFooter from '@/components/pages/PageFooter'
import remote from '@/utils/http'
export default {
  name: 'Campussecond',
  components: { PageHeader, PageSide, PageContent, PageFooter },
  data () {
    return {
      currentDate: new Date(),
      currentPage: 1,
      imglist: [
        { id: 1, imgurl: '/static/second/1.jpg' },
        { id: 2, imgurl: '/static/second/2.jpg' },
        { id: 3, imgurl: '/static/second/3.jpg' },
        { id: 4, imgurl: '/static/second/4.jpg' },
        { id: 5, imgurl: '/static/second/5.jpg' },
        { id: 6, imgurl: '/static/second/6.jpg' },
        { id: 7, imgurl: '/static/second/3.jpg' }
      ],
      imgList2: [
        { id: 1, imgurl: '/static/second/1.jpg' }
      ],
      shopListData: []
    }
  },
  created () {
    this.goodslist()
    this.test()
  },
  methods: {
    test () {
      console.log(11111111)
    },
    // 请求商品的数据
    goodslist () {
      let that = this
      remote('goodslist', false, {}).then(res => {
        console.log('123456')
        if (res.code === 0) {
          this.shopListData = res.data.map(item => {
            return {
              id: item.id,
              title: item.title,
              goodstype: item.goodstype,
              price: item.price,
              qq: item.qq,
              wechat: item.wechat,
              address: item.address,
              mobile: item.mobile,
              time: item.time,
              status: item.status,
              clicks: item.clicks
            }
          })
          console.log(this.shopListData, '商品列表数据')
        } else {
          that.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 去详情的页面
    goToDetail (id) {
      this.$router.push({path: '/shopdetail', query: {id: id}})
      console.log(id, 'zheshajshahakjk1')
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped>
.test {
  width: 100%;
}
.swipe {
  margin: 20px 0;
  border: 1px solid;
}
.div {
  display: flex;
  flex-wrap: wrap;
}
.div1 {
  width: 300px;
  height: 300px;
  background-color: #e72b2f;
}
/* 轮播样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 页面商品卡片 */
.shopcard {
  display: flex;
  flex-wrap: wrap;
}
.shopcard_ch1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.shopcard_ch1_ch1 {
  width: 220px;
  height: 300px;
  border: 1px solid #999999;
  font-size: 11px;
  border-radius: 5px;
  margin: 20px 40px;
  padding-bottom: 10px;
}
.shopcard_img {
  width: 210px;
  height: 240px;
  padding: 5px 5px;
}
.shopcard_content {
  display: flex;
  padding: 3px 5px;
}
.shopcard_price {
  flex: 1;
  font-size: 18px;
  color: #e72b2f;
  font-weight: bold;
}
.shopcard_price {
  flex: 1;
}
.shopcard_title {
  font-size: 17px;
  font-weight: bold;
  color: #320840;
  padding-left: 5px;
}
.shopcard_address {
  width: 70%;
  color: #333333;
  font-size: 14px;
}
.shopcard_status {
  flex: 1;
  font-size: 12px;
  color: green;
  display: flex;
  justify-content: flex-end;
}
/* 分页栏的样式 */
.paging_page {
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 页面内容样式 */
.top-img {
  width: 100%;
}
.page-body {
  padding-top: 80px;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  width: 98%;
}
.page-body1 {
  flex: 1;
}
.page-body2 {
  width: 87%;
}
</style>
